<template>
  <BasicModal 
    v-bind="$attrs" 
    @register="registerModal" 
    :title="title" 
    width="500px" 
    :height="600"
  >
      <div
        :class="`${prefixCls}-form`"
        class="w-full px-5 h-full xl:bg-transparent "
      >
        <ThirdBindUser ref="thirdBindUserRef" @loginSuccess="handleLoginSuccess" @loginBefore="handleLoginBefore"/>
      </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import ThirdBindUser from './ThirdBindUser.vue';
import {BasicModal, useModalInner} from '/@/components/Modal';
import {useI18n} from '/@/hooks/web/useI18n';
import {useDesign} from '/@/hooks/web/useDesign';

const { t } = useI18n();

const { prefixCls } = useDesign('bind-account');
const thirdBindUserRef = ref<any>()
const title = ref('绑定用户')

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({
    showOkBtn: false, showCancelBtn: false,
    draggable: false, canFullscreen: false
  })
  thirdBindUserRef.value?.onThirdLogin(data)
});

const handleLoginSuccess = () => {
  
}

const handleLoginBefore = () => {
  closeModal()
}

</script>


<style lang="less">

  @prefix-cls: ~'@{namespace}-bind-account';

  .@{prefix-cls} {
    min-height: 100%;
    overflow: hidden;
    &-form {
      top: -20px;
      margin: auto;
      background-color: #fff;
      // box-shadow: 0 4px 8px -4px rgba(0,0,0,.13), 0 6px 16px 0 rgba(0,0,0,.08), 0 12px 24px 16px rgba(0,0,0,.04);
    }

    &-title {
      font-size: 20px;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 100%;
      // margin-left: -48%;
      background-image: url(/@/assets/svg/login-bg.svg);
      background-position: 100%;
      background-repeat: no-repeat;
      background-size: auto 100%;
      content: '';
      @media (max-width: @screen-xl) {
        display: none;
      }
    }

    &-sign-in-way {
      .anticon {
        font-size: 22px;
        color: #888;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }
      }
    }

    input:not([type='checkbox']) {
      min-width: 360px;

      @media (max-width: @screen-xl) {
        min-width: 420px;
      }

      @media (max-width: @screen-lg) {
        min-width: 260px;
      }

      @media (max-width: @screen-md) {
        min-width: 240px;
      }

      @media (max-width: @screen-sm) {
        min-width: 160px;
      }
    }

    .valid-code input {
      min-width: auto;
    }

    .ant-divider-inner-text {
      font-size: 12px;
      color: @text-color-secondary;
    }
  }
</style>
